<template>
  <div class="answer-component">
    <div v-if="!question || !question.answer" class="empty-container">
      <a-empty description="暂无答案或您没有权限查看" />
    </div>
    <div v-else class="answer-container">
      <a-card :bordered="false">
        <AnswerCodeEditor :code="question.answer || ''" />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";
import MdViewer from "@/components/MdViewer.vue";
import AnswerCodeEditor from "@/components/AnswerCodeEditor.vue";

interface QuestionVO {
  id?: string;
  title?: string;
  content?: string;
  tags?: string[];
  answer?: string;
  judgeConfig?: {
    timeLimit?: number;
    memoryLimit?: number;
    stackLimit?: number;
  };
}

// 接收 question 数据
const props = defineProps<{ question: QuestionVO | undefined }>();

// **从答案Markdown中提取代码**
const extractedCode = computed(() => {
  if (!props.question || !props.question.answer) {
    return { code: "", language: "java" };
  }

  // **匹配 Markdown 代码块**
  const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/;
  const match = props.question.answer.match(codeBlockRegex);

  if (match && match.length >= 3) {
    return {
      language: match[1] || "java",
      code: match[2].trim(),
    };
  }

  return { code: "", language: "java" };
});
</script>

<style scoped>
.answer-component {
  padding: 8px 0;
}

.empty-container {
  padding: 40px 0;
  text-align: center;
}

.answer-container {
  margin-top: 8px;
}
</style>
